import { CSSProperties, PropsWithChildren } from "react";
import { useMaterailDrop } from "../../../hooks/useMaterialDrop";
export interface CommonComponentProps extends PropsWithChildren{
    id: number;
    name: string;
    styles?:CSSProperties;
    [key: string]: any
}

function Page({ id , children , styles }: CommonComponentProps) {
    const {canDrop, drop }= useMaterailDrop(['Button' , 'Container'] , id)
	return (
		<div
            data-component-id={id}
			ref={drop}
			style={{ ...styles , border: canDrop ? "2px solid blue" : "none" }}
			className="page"
		>
			{children}
		</div>
	);
}

export default Page;
